<!-- 修改船代 -->
<template>
  <div class="edit-Boat-dialog">
    <el-dialog
      width="800px"
      class=""
      top="6vh"
      title="修改"
      :visible="$store.state.dialog.editBoat"
      @close="close">
      <el-row>
        <el-col :span="24">
          <el-card shadow="hover">
            <el-form :model="editship" label-width="110px" size="mini" :rules="rules" ref="editship">
              <el-row>
                <el-col :span="8">
                  <el-form-item label="船代公司名称" prop="boatAgentName">
                    <el-input v-model="editship.boatAgentName" auto-complete="off"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="状态" prop="state">
                    <el-select placeholder="请选择" v-model="editship.state">
                      <el-option label="休眠" value="0"></el-option>
                      <el-option label="激活" value="1"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="提单号" prop="oddNum">
                    <el-input v-model="editship.oddNum" auto-complete="off"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="有效期" prop="effectiveDate">
                     <el-date-picker
                      v-model="editship.effectiveDate"
                      align="right"
                      value-format="yyyy-MM-dd"
                      :picker-options="pickerOptions1"
                      placeholder="选择日期时间">
                    </el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-card>
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="sureBoatcompy('editship')" size="mini">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { UpdateBoatAgentCom } from '../api/putBoxCompany'
export default {
  data () {
    return {
      rules: {
        boatAgentName: [
          { required: true, message: '请输入中文姓名', trigger: 'blur' },
          { min: 2, max: 4, message: '长度在 2 到 4 个字符', trigger: 'blur' }
        ],
        state: [
          { required: true, message: '请选择状态', trigger: 'blur' }
        ],
        oddNum: [
          { required: true, message: '请输入提单号', trigger: 'blur' }
        ],
        effectiveDate: [
          { required: true, message: '请输入有效期', trigger: 'blur' }
        ]
      },
      pickerOptions1: {
        shortcuts: [{
          text: '今天',
          onClick (picker) {
            picker.$emit('pick', new Date())
          }
        }, {
          text: '明天',
          onClick (picker) {
            const date = new Date()
            date.setTime(date.getTime() + 3600 * 1000 * 24)
            picker.$emit('pick', date)
          }
        }, {
          text: '后天',
          onClick (picker) {
            const date = new Date()
            date.setTime(date.getTime() + 3600 * 1000 * 24 * 2)
            picker.$emit('pick', date)
          }
        }]
      }
    }
  },
  async mounted () {},
  props: {
    editship: {
      type: Object
    }
  },
  methods: {
    // 修改
    async editBoatcompy () {
      const res = await UpdateBoatAgentCom({
        boatAgentName: this.editship.boatAgentName,
        oddNum: this.editship.oddNum,
        effectiveDate: this.editship.effectiveDate,
        boatAgentId: this.editship.boatAgentId,
        state: this.editship.state
      })
      if (res.status === 200) {
        this.$notify({
          title: '成功',
          message: res.msg,
          type: 'success'
        })
        this.$store.commit('hide_edit_boat_dialog')
      } else {
        this.$notify({
          title: '错误',
          message: res.msg,
          type: 'error'
        })
      }
    },
    // 确认修改
    sureBoatcompy (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.editBoatcompy()
        } else {
          return false
        }
      })
    },
    close () {
      this.$store.commit('hide_edit_boat_dialog')
    }
  }
}
</script>

<style scoped lang="less">
  .el-input__prefix {
    left: 0px !important;
  }
</style>
